<template >
  <el-card class="box-card" :data="articleData" style="min-height: 900px">
    <!-- 文章标题 -->
    <div slot="header" class="clearfix">
      <span style="font-size: 30px">{{ articleData.article.title }}</span>
    </div>

    <!-- 文章内容 -->
    <div style="text-align: left">
      <span
        v-html="articleData.article.content"
        style="word-break: break-all; word-wrap: break-word"
      >
      </span>
    </div>
    <!-- 文章流量 -->
    <div id="crossline" style="text-align: left">
      <el-divider content-position="left">{{
        fromData.publishDate
      }}</el-divider>
      <span style="text-align: right; margin-left: 10px">
        <el-button
          id="dianzan"
          v-model="fromData.like"
          :data="fromData.like"
          @click="like"
          type="text"
        >
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-good"></use>
          </svg>
          {{ likeCount }}</el-button
        >
      </span>

      <span style="text-align: right; margin-left: 10px">
        <el-button type="text">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-comments"></use>
          </svg>
          {{ comCount }}</el-button
        >
      </span>
      <span style="text-align: right; margin-left: 10px">
        <el-button type="text" disabled>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-browse"></use>
          </svg>
          {{ viewCount }}</el-button
        >
      </span>
    </div>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 评论 -->
    <div style="text-align: left">
      <label style="font-size: 20px"> 评论: </label>
    </div>

    <div style="margin-top: 20px" :data="tableData">
      <label style="color: blue"> {{ user.username }}: </label>
      <el-input
        style="width: 80%"
        placeholder="文明冲浪，友善评论"
        v-model="fromData.commentInput"
        clearable
      >
      </el-input>
      <el-button
        style="margin-left: 10px"
        type="primary"
        @click="addComment(fromData.commentInput)"
        plain
        >发表评论</el-button
      >
    </div>
    <el-divider></el-divider>
    <!-- 评论区 -->
    <div
      style="text-align: left; margin-left: 60px; font-size: 25px"
      v-for="(comment, index) in fromData.commentObj"
      :key="comment.username"
      :index="index"
    >
      <!-- 文章评论 -->
      <div @click="changCommmer(comment.commenter, index)">
        <label style="color: blue"> {{ comment.commenter }}: </label>
        <div>
          <span @click="dialogVisible = true" style="cursor: pointer">
            {{ comment.comment }}</span
          >
          <el-button id="replyBtn" @click="dialogVisible = true" type="text"
            >回复</el-button
          >
        </div>

        <!-- 回复评论 -->
        <div
          v-for="reply in comment.replyComment"
          @click="changCommmer(reply.replier, index)"
          :key="reply.replier"
          style="margin-left: 100px; margin-top: 10px; font-size: 15px"
        >
          <label style="color: blue"
            >{{ reply.replier }}&nbsp;&nbsp;回复&nbsp;&nbsp;{{
              reply.byReplier
            }}:</label
          >
          <div>
            <span @click="dialogVisible = true" style="cursor: pointer"
              >{{ reply.reply }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 回复评论的模态框 -->
    <el-dialog
      title="回复评论"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>
        <el-input
          placeholder="这么说，你很勇咯？"
          v-model="replyInput"
          clearable
        >
        </el-input
      ></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="(dialogVisible = false), addComment(replyInput)"
          >回 复</el-button
        >
      </span>
    </el-dialog>
  </el-card>
</template>

<script >
import { getList } from "../../api/index";
import { getUsers } from "../../api/index";
import { CommentMsg, GetCommentMsg } from "../../api/index";
import { PostViews, GetLikeCount } from "../../api/index";
// import {CommentMsg} from "../../api/index";

let dianzanStatus = 0;

export default {
  props: {
    CommentRecommend: [],
    ViewsRecommend: [],
    AdminRecommend: [],
  },

  watch: {
    CommentRecommend: {
      handler: function (newValue, oldValue) {
        if (newValue && oldValue) {
          this.fetchData();
        }
      },
      deep: true,
    },
    ViewsRecommend: {
      handler: function (newValue, oldValue) {
        // console.log(oldValue)
        // console.log(newValue)
        if (newValue && oldValue) {
          this.fetchData();
        }
      },
      deep: true,
    },

    articleData: {
      handler: function (newValue, oldValue) {
        console.log(oldValue);
        // console.log(newValue, oldValue.length === 0);
        if (oldValue.length === 0) {
          console.log(1);
          this.page();
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      commenter: "session", //评论人，这里会从session拿
      type: 0, //0为评论作者1为评论别人的评论
      byReplier: null, //被评论者的名字
      chosedIndex: -1, //被选中的评论的index
      viewCount: 1,
      comCount: 1,
      likeCount: 1,
      // 用于存放监听到的文章
      articleData: [],

      // 点击标题的索引和id
      articleIndex: {
        getArticleId: -1,
        getIndex: -1,
      },

      // 回复评论的模态框状态
      dialogVisible: false,

      // 回复评论

      // 回复评论输入框
      replyInput: "",
      // 文章标题demo
      fromData: {
        articleTitle: "一杯茶，一包烟，一个bug改一天",

        // 文章内容demo

        articleContent:
          "lksssssssssssssssssssssssssssssssssssssssssssdsaaaaaaaaasssssssssssssssssssssssssssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsasssdsaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssdsaaaaaaaaaaasssssssssssssssssaasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",

        // 浏览量demo
        browse: 9940,
        // 点赞数demo

        like: 2000,

        // 评论数demo
        commentCount: 500,
        // 发布日期demo
        publishDate: "2021-07-31",
        // 评论输入框demo
        commentInput: "",
        // 评论demo
        commentObj: [
          {
            commenter: "",
            comment: "",
            replyComment: [
              {
                byReplier: "admin",
                replier: "FunnyMudPee",
                reply: "这是第一条回复",
              },
              {
                byReplier: "admin",
                replier: "syq",
                reply: "这是第二条回复",
              },
            ],
          },
          {
            commenter: "FunnyMudPee",
            comment: "这是第二条评论",
            replyComment: [],
          },
          {
            commenter: "syq",
            comment: "这是第三条评论",
            replyComment: [],
          },
        ],
      },
      user: {
        //登录用户id
        userid: "",
        //登录用户
        username: "",
        //评论作者
        //评论内容
        comment: "",
        //
        articleid: "",
      },
    };
  },

  methods: {
    //浏览量方法
    page() {
      var artId = this.articleData.article.id;
      console.log(artId);
      var userId = localStorage.getItem("userId");
      setTimeout(() => {
        PostViews({ UserId: parseInt(userId), ArticleId: artId })
          .then((data) => {
            console.log(data);
          })
          .catch((err) => {
            console.log(err);
          });
      }, 5000);
    },

    // 点赞方法
    like() {
      let dianzan = document.getElementById("dianzan");

      if (dianzanStatus === 0) {
        dianzanStatus = 1;
        this.likeCount += 1;
        dianzan.style.color = "#409EFF";
        console.log("已点赞");
        console.log("点赞数：", this.likeCount);
      } else {
        dianzanStatus = 0;
        this.likeCount -= 1;
        dianzan.style.color = "black";
        console.log("取消点赞");
        console.log("取消后点赞数：", this.likeCount);
      }
    },
    // fetchData() {
    //   getList()
    //     .then((data) => {
    //       console.log(data.data);
    //       this.articleData = data.data;
    //       // console.log(this.articleData);
    //       this.renderer();

    //       data.data.forEach((ele) => {
    //         this.articleTitle = ele.title;
    //         this.articleContent = ele.content;
    //       });
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },

    fetchData() {
      // if (
      //   !this.CommentRecommend.length > 0 &&
      //   !this.ViewsRecommend.length > 0
      // ) {
      //   this.fetchData();
      // }
      
        //点赞信息
        GetLikeCount()
          .then((likeCountData) => {
            // console.log(likeCountData.data.data);
            this.likeCountData = likeCountData.data.data;
            var likeRes = likeCountData.data.data;
            //列表信息
            getList()
              .then((listData) => {
                var res = listData.data.data;
                console.log(listData);
                res.forEach((e) => {
                  e.imgPath =
                    "http://localhost:5000/" +
                    e.imgPath.slice(e.imgPath.indexOf("files") + 6);

                  // console.log(this.CommentRecommend);
                  this.CommentRecommend.forEach((item) => {
                    if (e.article.id === item.id) {
                      e.commentCount = item.CommentCount;
                    }
                    if (!e.commentCount) {
                      e.commentCount = 0;
                    }
                  });

                  this.ViewsRecommend.forEach((item) => {
                    // console.log(item);
                    if (e.article.id === item.id) {
                      e.viewsCount = item.viewsCount;
                    }
                    if (!e.viewsCount) {
                      e.viewsCount = 0;
                    }
                  });

                  likeRes.forEach((x) => {
                    if (e.article.id === x.articleId) {
                      e.count = x.count;
                    }
                    if (!e.count) {
                      e.count = 0;
                    }
                  });
                });
                this.fromData = res;
                // console.log(this.fromData);
                this.fromData.forEach((ele) => {
                  // console.log(ele);
                  if (ele.article.id == this.articleData.article.id) {
                    this.viewCount = ele.viewsCount;
                    this.comCount = ele.commentCount;
                    this.likeCount = ele.count;
                    // console.log(this.viewCount)
                    // console.log(this.comCount)
                    // console.log(this.likeCount)
                  }
                });
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch((err) => {
            console.log(err);
          });
      //获取浏览量表
      // GetViews().then(data=>{
      //   console.log(data.data.data);
      // }).catch(err=>{
      //   console.log(err);
      // })
      // .catch((err) => {
      //   console.log(err);
      // });
    },

    // 防误触（回复评论模态框）
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },

    // 添加评论或回复
    addComment(data) {
      console.log(this.user.userid);
      CommentMsg(this.user.userid)
        .then(({ data }) => {
          console.log("评论");
          this.tableData.push(data.data);
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });

      // console.log(this.type);
      if (this.type == 0) {
        this.fromData.commentObj.push({
          //添加评论人
          commenter: this.user.username,
          comment: data,
          replyComment: [],
        });
      } else if (this.type == 1) {
        console.log(this.chosedIndex);

        this.fromData.commentObj[this.chosedIndex].replyComment.push({
          //回复人
          replier: this.user.username,
          byReplier: this.oldComment,
          reply: data,
        });

        this.type = 0;
        this.replyInput = "";
      }
    },

    //查询评论
    queryCommentReply() {
      getList({ query: "a" })
        .then(({ data }) => {
          this.articleData = data.data;
          // console.log(this.articleData);
          //遍历所有对象获得当前文章id
          this.articleData.forEach((item) => {
            // console.log(item.article.id);
            //找到当前文章id
            if (item.article.id == this.articleIndex.getArticleId) {
              // console.log(item.article.id);
              //查询评论
              GetCommentMsg(item.article.id)
                .then(({ data }) => {
                  // console.log(data);
                  this.commentObj.commenter = this.user.username;
                  this.commentObj.content = data.content;
                })
                .catch((err) => {
                  console.log(err);
                });
            }
          });
          this.renderer();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 监听到所选的是别人的评论
    changCommmer(name, index) {
      this.oldComment = name;
      this.chosedIndex = index;
      this.type = 1;
    },
    //查询用户信息
    getUserInformation() {
      getUsers()
        .then(({ data }) => {
          //登录获取的用户id
          var userid = localStorage.getItem("userId");
          this.tableData = data.data;
          this.tableData.forEach((item) => {
            if (item.id == userid) {
              //将遍历的id与登录id匹配拿到登录用户名
              var usernameid = item.username;
              this.user.username = usernameid;
            }
          });
          // console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //判断当前文章id是否对应
    renderer() {
      // console.log(arr);
      this.articleData.forEach((item) => {
        if (item.article.id === this.articleIndex.getArticleId) {
          this.articleData = item;
        }
      });
    },
  },
  mounted() {
    this.articleIndex.getArticleId = this.$route.query.getArticleId - 0;
    this.fetchData();

    this.getUserInformation();
    this.queryCommentReply();
    this.page();
  },
};
</script>

<style scoped>
.icon {
  width: 25px;
  height: 25px;
  vertical-align: -0.5em;
  fill: currentColor;
  overflow: hidden;
}

.el-button--text {
  color: black;
}

#replyBtn {
  color: #409eff;
  float: right;
  margin-right: 30px;
}
/* .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  } */
</style>